<template>
  <div class="item">
    <el-row type="flex" justify="space-around" class="head">
      <el-col :span="6">
        <span class="label">{{ time }}</span>
      </el-col>
      <el-col :span="12">
        <span class="label">订单号：</span><span class="data">{{ id }}</span>
      </el-col>
      <el-col :span="6">
        <span class="label">收货地址：</span><span class="data">{{ addr }}</span>
      </el-col>
    </el-row>
    <!--    书籍列表-->
    <template v-for="book in books">
      <el-row :key="book.id" :gutter="20" type="flex" justify="space-around" class="book">
        <!--        图片-->
        <el-col :span="3">
          <el-image
              :src="book.img"
              @click.stop.prevent="jump(book.id)"
              class="book-image"
          />
        </el-col>
        <!--        标题-->
        <el-col :span="4">
          <el-link type="primary" @click.stop.prevent="jump(book.id)">
            {{ book.title }}
          </el-link>
        </el-col>
        <!--        单价-->
        <el-col :span="3">
          <span class="data">￥ {{ book.price.toFixed(2) }}</span>
        </el-col>
        <!--        计数-->
        <el-col :span="3">
          <span class="label">x{{ book.count }}</span>
        </el-col>
        <!--        总价-->
        <el-col :span="4">
          <span class="price">￥ {{ (book.count * book.price).toFixed(2) }}</span>
        </el-col>
        <!--        评论按钮-->
        <el-col :span="2" v-if="!admin">
          <el-button type="primary" :disabled="status !== 3" @click="jump(book.id)">评价</el-button>
        </el-col>
      </el-row>
    </template>
    <!--    底栏-->
    <el-row :gutter="20" type="flex" justify="end" align="middle" class="tail">
      <el-col :span="2">
        <span class="label">状态：</span><span class="data">{{ statusReadable }}</span>
      </el-col>
      <el-col :span="4">
        <el-button class="option" type="danger" v-if="status === 0 && !admin" @click="del">删除订单</el-button>
      </el-col>
      <el-col :span="4">
        <template v-if="!admin">
          <el-button class="option" type="primary" v-if="status === 0" @click="pay">付款</el-button>
          <el-button class="option" type="primary" v-else-if="status === 2" @click="commit">确认收货</el-button>
        </template>
        <template v-else>
          <el-button class="option" type="primary" v-if="status === 1" @click="send">发货</el-button>
        </template>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "OrderItem",
  props: {
    id: String,
    time: String,
    status: Number,
    addr: String,
    books: Array,
    admin: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    jump(id) {
      this.$router.push(`/detail/${id}`)
    },
    pay() {
      this.$emit('pay', this.id)
    },
    commit() {
      this.$emit('confirm', this.id)
    },
    send() {
      this.$emit('send', this.id)
    },
    del() {
      this.$emit('del', this.id)
    }
  },
  computed: {
    statusReadable() {
      switch (this.status) {
        case 0:
          return '未付款'
        case 1:
          return '待发货'
        case 2:
          return '已发货'
        case 3:
          return '已签收'
        default:
          return '未知'
      }
    }
  }
}
</script>

<style scoped>
.book-image {
  cursor: pointer;
  height: 80px;
  width: 80px;
}

.label {
  color: #777;
  font-size: 12pt;
}

.data {
  font-weight: bold;
  font-size: 12pt;
}

.price {
  font-size: 16pt;
  color: red;
}

.head {
  margin: 10px 10px 20px 10px;
}

.item {
  border: #409eff 1px solid;
  border-radius: 10px;
  margin-bottom: 10px;
}

.book {
  margin-bottom: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

.book:last-child {
  margin-bottom: 10px;
}

.option {
  width: 100%;
}

.tail {
  border-top: #409eff 1px solid;
  padding: 10px;
  min-height: 60px;
}
</style>